<template>
  <section id="default">
    <div style='padding-bottom:50px;'>
        <el-row>
            <!-- 这是一个商品 -->
            <el-col :span='12' v-for="(goods,index) in leixinData" :key='index'>
                <div style='width:85%;padding-bottom:20px;margin:10px auto;' @click='inGoods(goods.id)'>
                    <div>
                        <img :src="JSON.parse(goods.iconMain)[0]" width='100%' >
                    </div>
                    <p style='margin:8px 0 10px;letter-spacing:2px;'>{{goods.name}}</p>
                </div>
            </el-col>
            <!-- 这是一个商品 -->
        </el-row>
    </div>
    <!-- 这两个层都是控制左边导航 -->
    <CloseLeft v-if='controlModel'  @closeModel='controlModel=false'/>
    <transition
        enter-active-class='animated bounceInLeft'
        leave-active-class='animated bounceOutLeft'
    >
        <Left v-if='controlModel'  @changeType='changeType'/>
    </transition>
    <!-- 这两个层都是控制左边导航 -->

    <!-- 这一个层是聊天二维码 -->
    <transition
        enter-active-class='animated fadeIn'
        leave-active-class='animated fadeOut'
    >
        <Qr v-if='controlQr' @closeQr='controlQr=false'/>
    </transition>
    <!-- 这一个层是聊天二维码 -->
    <Bottom @openLeft='controlModel=true' @openQr='controlQr=true' @car='goOrder'/>
  </section>
</template>
<script>
import Left from '@/components/left.vue';
import Bottom from '@/components/bottom.vue';
import CloseLeft from '@/components/close-left.vue';
import Qr from '@/components/qr.vue';
import {AJAX,GOLEIXIN,_layer} from '@/comm.js';
export default {
  data(){
    return ({
      controlModel:false,    //控制左边导航
      controlQr:false,        //控制二维码
      leixinData:[]
    });
  },
  components:{
    Left,
    Bottom,
    CloseLeft,
    Qr,
  },
  created(){
    let val=this.$route.query.id;
    this.getData(val);
  },
  methods:{
    getData(val){
        $.post(GOLEIXIN,{
            psId:val
        },(data)=>{ 
            console.log('类型进来了');
            console.log(data);
            if(data.state){
                this.leixinData=data.data;
            }else{
                _layer(data.message);
            }
        });
    },
    changeType(val){
        this.getData(val);
        this.controlModel=false;
    },
    inGoods(id){
        this.$router.push({path:'/goodsInfo',query:{id:id}});
    },
    //去我的订单
    goOrder(){
        this.$router.push({path:'/orderList'});
    }
  }
}
</script>
<style scoped>
   /* .fixed-bottom{
        position: fixed;
        width: 100%;
        height: 50px;
        bottom:0;
        background: #183242;
    }
    .fixed-bottom .icon{
        width: 100%;
        height:100%;
        font-size:20px;
        line-height: 50px;
        text-align: center;
        color:white;
    }
    .fixed-bottom .shopping-car{
        background: red;
    }
    .close-left{
        position: fixed;
        top:0;
        right: 0;
        bottom:0;
        left:0;
        background: rgba(0,0,0,0);
    }
    .left-type{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        z-index:2;
        width:150px;
        background: rgba(0,0,0,.7);
    }
    .left-type .left-li{
        padding:15px 0;
        font-size:16px;
        text-align: center;
        color:white;
    }*/
    
</style>
